<template>
  <a-modal
    destroyOnClose
    v-bind="$attrs"
    :width="817"
    cancelText="取消"
    okText="确定"
    @ok="handleConfirmModal"
  >
    <a-form
      ref="moduleFormRef"
      layout="vertical"
      :rules="CURRENT_RULES"
      :model="ownFormData"
    >
      <a-row :gutter="[20, 20]">
        <a-col :span="12">
          <a-form-item label="名称" has-feedback name="name">
            <a-input v-model:value="ownFormData.name" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="图标" has-feedback name="slug">
            <a-input v-model:value="ownFormData.slug" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[20, 20]">
        <template v-if="isDetail">
          <a-col :span="12">
            <a-form-item label="状态" has-feedback name="status">
              <a-input v-model:value="ownFormData.status" />
            </a-form-item>
          </a-col>
        </template>
        <a-col :span="12">
          <a-form-item label="能否删除" has-feedback name="canDelete">
            <a-radio-group v-model:value="ownFormData.canDelete">
              <a-radio :value="1">能</a-radio>
              <a-radio :value="0">不能</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>
<script lang="ts" setup>
import { Rule } from "ant-design-vue/es/form";
import type { FormInstance } from "ant-design-vue";
import { computed, reactive, ref, watch } from "vue";
import type { ModuleForm } from "./types";
import cloneDeep from "lodash/cloneDeep";

interface Props {
  actionType?: string; // create,detail
  data: ModuleForm;
}

const CREATE_MODULE_FORM_RULES: Record<string, Rule[]> = {
  name: [{ required: true, trigger: ["change", "blur"] }],
  canDelete: [{ required: true, trigger: ["change", "blur"] }],
};

const MODULE_DETAIL_FORM_RULES: Record<string, Rule[]> = {
  id: [{ required: true, trigger: ["change", "blur"] }],
  name: [{ required: true, trigger: ["change", "blur"] }],
  canDelete: [{ required: true, trigger: ["change", "blur"] }],
  status: [{ required: true, trigger: ["change", "blur"] }],
};

const emits = defineEmits<{
  (e: "submit", payload: ModuleForm): void;
}>();

const props = withDefaults(defineProps<Props>(), {
  actionType: "create",
});

const CURRENT_RULES =
  props.actionType === "create"
    ? CREATE_MODULE_FORM_RULES
    : MODULE_DETAIL_FORM_RULES;

const moduleFormRef = ref<FormInstance>();

let ownFormData = reactive<ModuleForm>({
  name: "",
  slug: "",
  status: "",
  id: "",
  canDelete: 1,
});

const isDetail = computed<boolean>(() => {
  return props.actionType === "detail";
});

watch(
  () => props.data,
  (newVal) => {
    ownFormData = reactive(cloneDeep(newVal));
  },
  {
    immediate: true,
    deep: true,
  }
);

const handleConfirmModal = () => {
  moduleFormRef.value
    ?.validate()
    .then(() => {
      emits("submit", ownFormData);
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>
